<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
	<head>
		<th:block th:include="include :: header('字段融合选择页面')" />
		<link th:href="@{/css/common.css}" rel="stylesheet"/>
		<link th:href="@{/js/plugins/swiper/swiper-bundle.css}" rel="stylesheet"/>
		<link th:href="@{/css/choose_data_map.css}" rel="stylesheet"/>
		<script th:src="@{/js/plugins/swiper/swiper-bundle.js}"></script>
	</head>
	<body>
	<form id="form-interface-field">
		<div class="wrapper wrapper-content field bff-field">

				<input type="hidden" name="id" id="id" th:value="${id}">
				<input type="hidden" name="objectId" th:value="${objectId}">
				<input type="hidden" name="virtualUsageId" th:value="${virtualUsageId}">
				<input type="hidden" name="mergeVirtualUsageId" id="mergeVirtualUsageId" th:value="${mergeVirtualUsageId}">
				<div class="content">
					<ul class="tab-list" role="tablist">
					</ul>
					<div class="tab-content" id="tabDiv">

					</div>
				</div>

		</div>
	</form>
	</body>
	<th:block th:include="include :: footer" />
	<script th:inline="javascript">
		var prefix = ctx + "virtualUsageFieldMerge/virtualUsageFieldMerge";
		var interfaceObjectParamList = [[${interfaceObjectParamList}]];
		var sourceId = [[${mergeObjectId}]];
		function submitHandler() {
			var mergeObjectId=$('input:radio[name="mergeObjectId"]:checked').val();
			if (mergeObjectId) {
				var id =$("#id").val();
				var url = prefix + "/add";
				if (id) {
					url = prefix + "/edit";
				}
				var config = {
					url: url,
					type: "post",
					async: false,
					dataType: "json",
					data: $('#form-interface-field').serialize(),
					beforeSend: function () {
						$.modal.loading("正在处理中，请稍后...");
						$.modal.disable();
					},
					success: function(result) {
						if (result.code == web_status.SUCCESS) {
							$.modal.close();
						} else if (result.code == web_status.WARNING) {
							$.modal.alertWarning(result.msg)
						}  else {
							$.modal.alertError(result.msg);
						}
						$.modal.closeLoading();
					}
				};
				$.ajax(config)
			} else {
				$.modal.alertWarning("请选择字段");
			}
		}

		function resetHandler() {
			var id =$("#id").val();
			if (id) {
				var url = prefix + "/remove?ids="+id;
				var config = {
					url: url,
					type: "post",
					async: false,
					dataType: "json",
					beforeSend: function () {
						$.modal.loading("正在处理中，请稍后...");
						$.modal.disable();
					},
					success: function(result) {
						if (result.code == web_status.SUCCESS) {
							$.modal.close();
						} else if (result.code == web_status.WARNING) {
							$.modal.alertWarning(result.msg)
						}  else {
							$.modal.alertError(result.msg);
						}
						$.modal.closeLoading();
					}
				};
				$.ajax(config);
			} else {
				$.modal.close();
			}
		}

		$(function () {
			initUl(interfaceObjectParamList);
			$("body").on('change', '.allSelect', function () {
				var flag = this.checked;
				$(this).parents("table").find("tbody input").each(function(){
					if (!$(this).attr('disabled')) {
						$(this).prop("checked", flag);
					}
				});

				checkboxClick();
			}).on('click', '.mergeObjectId', function () {
				var virtualUsageId = $(this).attr('virtualUsageId');
				$("#mergeVirtualUsageId").val(virtualUsageId);
			});
		})

		function initUl(interfaceObjectParamList) {
			if (interfaceObjectParamList && interfaceObjectParamList.length > 0) {
				for (var i=0; i<interfaceObjectParamList.length; i++) {
					var virtualUsageTpl = $("#virtualUsageTpl").html();
					var id = interfaceObjectParamList[i].index;
					var slaveInterfaceName = interfaceObjectParamList[i].interfaceName;
					laytpl(virtualUsageTpl).render(id, function (html) {
						$("#tabDiv").append(html);
					});
					if (i==0) {
						$("ul").append("<li class='active'><a aria-expanded=\"true\"  href=\"#tab-"+id+"\" role=\"tab\" data-toggle=\"tab\" style = \"margin-right: 15px;\">"+slaveInterfaceName+"</a></li>");
						$("#tab-" + id).addClass('active');
					} else {
						$("ul").append("<li class=''><a aria-expanded=\"false\" href=\"#tab-"+id+"\" role=\"tab\" data-toggle=\"tab\" style = \"margin-right: 15px;\">"+slaveInterfaceName+"</a></li>");
					}
					var objectParamList = interfaceObjectParamList[i].objectParamList;
					if (objectParamList && objectParamList.length > 0) {
						objectParamList = convert(objectParamList);
						var paramsTplHtml = $("#paramsTpl").html();
						laytpl(paramsTplHtml).render(objectParamList, function (html) {
							$("#tab-" + id + " table tbody").append(html);
						});
					}
				}
			}
            new Swiper(".tabSwiper", {
                centeredSlidesBounds: true,
                slidesPerView: "auto",
                spaceBetween: 0,
                grabCursor: true,
                slideToClickedSlide: true
            });
		}

		function convert(data) {
			if (sourceId && data && data.length > 0) {
				for (var i=0; i<data.length; i++) {
					if (sourceId == data[i].id) {
						data[i].selected = true;
						break;
					}
				}
			}
			return data;
		}

	</script>
	<script id="paramsTpl" type="text/template">
		{{# layui.each(d, function(index, a){ }}
		<tr>
			{{# if(a.selected) { }}
			<td><input class="mergeObjectId" name="mergeObjectId" virtualUsageId="{{a.virtualUsageId}}" checked type="radio" value="{{a.id}}"></td>
			{{# } else { }}
			<td><input class="mergeObjectId" name="mergeObjectId" virtualUsageId="{{a.virtualUsageId}}" type="radio" value="{{a.id}}"></td>
			{{# } }}
			<td>{{a.paramName}}</td>
			<td>{{a.paramEnName}}</td>
			<td>{{a.paramTypeName}}</td>
		</tr>
		{{# }); }}
	</script>
	<script id="virtualUsageTpl" type="text/template">
		<div id="tab-{{d}}" class="tab-pane">
			<table class="table table-hover" style = "margin-top:10px;">
				<thead>
				<tr>
					<td></td>
					<td>字段中文名称</td>
					<td>字段英文名称</td>
					<td>字段类型</td>
				</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
	</script>
</html>
